import './App.css';
import Blog from './common/Blog';
import PostList from './common/PostList';
import EmailList from './common/EmailList'
import ToggleSample from './common/ToggleSample'
import Charset from './common/Charset'
import StoreCounter from './common/StoreCounter';
import { useDispatch } from 'react-redux';
import { increment, decrement, addNum } from "./store/modules/counterStore";
import StoreChannel from './common/StoreChannel';

function App() {
  const language = 'react';
  let title = `this is ${language} test.`;
  const dispatch = useDispatch();

  return (
    <div className="App">
      {title}
      <PostList />
      <br/>
      <hr></hr>
      <br/>
      <Blog />
      <hr></hr>
      <EmailList title="Email List" />
      <hr></hr>
      <ToggleSample></ToggleSample>
      <hr></hr>
      <Charset></Charset>
      <hr></hr>
      <StoreCounter></StoreCounter>
      <button onClick={() => dispatch(decrement())}>Outer Button - </button>
      <button onClick={() => dispatch(increment())}>Outer Button + </button>
      <button onClick={() => dispatch(addNum(10))}>Outer Button Add 10 </button>
      <button onClick={() => dispatch(addNum(20))}>Outer Button Add 20 </button>
      <hr></hr>
      <StoreChannel></StoreChannel>
    </div>
  );
}

export default App;
